//
//  CardView.swift
//  AnnCardApp
//
//  Created by Developer on 2024/06/15.
//

import SwiftUI

struct CardView: View {
    let card: Card
    @State private var isFlipped = false
    @State private var showDefinition = false
    
    var body: some View {
        ZStack {
            // 卡片背景
            RoundedRectangle(cornerRadius: 20)
                .fill(
                    LinearGradient(
                        gradient: Gradient(colors: [
                            Color.blue.opacity(0.1),
                            Color.purple.opacity(0.1)
                        ]),
                        startPoint: .topLeading,
                        endPoint: .bottomTrailing
                    )
                )
                .shadow(color: .gray.opacity(0.3), radius: 10, x: 0, y: 5)
            
            VStack(spacing: 20) {
                // 难度和分类标签
                HStack {
                    Label(card.difficulty.rawValue, systemImage: "star.fill")
                        .font(.caption)
                        .padding(.horizontal, 12)
                        .padding(.vertical, 6)
                        .background(Color.orange.opacity(0.2))
                        .foregroundColor(.orange)
                        .cornerRadius(15)
                    
                    Spacer()
                    
                    Label(card.category.rawValue, systemImage: "tag.fill")
                        .font(.caption)
                        .padding(.horizontal, 12)
                        .padding(.vertical, 6)
                        .background(Color.green.opacity(0.2))
                        .foregroundColor(.green)
                        .cornerRadius(15)
                }
                
                if !isFlipped {
                    // 正面：显示英文单词
                    VStack(spacing: 15) {
                        Text(card.word)
                            .font(.system(size: 36, weight: .bold, design: .rounded))
                            .foregroundColor(.primary)
                        
                        Text(card.pronunciation)
                            .font(.title3)
                            .foregroundColor(.secondary)
                            .italic()
                        
                        // 发音按钮
                        Button(action: {
                            // TODO: 添加发音功能
                            print("播放发音: \(card.word)")
                        }) {
                            Image(systemName: "speaker.wave.2.fill")
                                .font(.title2)
                                .foregroundColor(.blue)
                                .padding()
                                .background(Color.blue.opacity(0.1))
                                .cornerRadius(10)
                        }
                    }
                } else {
                    // 背面：显示中文翻译和详细信息
                    VStack(spacing: 15) {
                        Text(card.translation)
                            .font(.system(size: 28, weight: .semibold))
                            .foregroundColor(.primary)
                            .multilineTextAlignment(.center)
                        
                        if showDefinition {
                            VStack(spacing: 10) {
                                Text("释义")
                                    .font(.headline)
                                    .foregroundColor(.secondary)
                                
                                Text(card.definition)
                                    .font(.body)
                                    .foregroundColor(.primary)
                                    .multilineTextAlignment(.center)
                                
                                Text("例句")
                                    .font(.headline)
                                    .foregroundColor(.secondary)
                                    .padding(.top, 10)
                                
                                Text(card.example)
                                    .font(.body)
                                    .foregroundColor(.primary)
                                    .multilineTextAlignment(.center)
                                    .italic()
                            }
                            .transition(.opacity)
                        }
                        
                        Button(action: {
                            withAnimation(.easeInOut(duration: 0.3)) {
                                showDefinition.toggle()
                            }
                        }) {
                            Text(showDefinition ? "隐藏详情" : "显示详情")
                                .font(.caption)
                                .foregroundColor(.blue)
                                .padding(.horizontal, 12)
                                .padding(.vertical, 6)
                                .background(Color.blue.opacity(0.1))
                                .cornerRadius(10)
                        }
                    }
                }
                
                Spacer()
                
                // 翻转提示
                Text(isFlipped ? "点击查看单词" : "点击查看翻译")
                    .font(.caption)
                    .foregroundColor(.secondary)
            }
            .padding(25)
        }
        .frame(height: 400)
        .rotation3DEffect(
            .degrees(isFlipped ? 180 : 0),
            axis: (x: 0, y: 1, z: 0)
        )
        .onTapGesture {
            withAnimation(.easeInOut(duration: 0.6)) {
                isFlipped.toggle()
                if !isFlipped {
                    showDefinition = false
                }
            }
        }
    }
}

struct CardView_Previews: PreviewProvider {
    static var previews: some View {
        CardView(card: Card(
            word: "Hello",
            translation: "你好",
            pronunciation: "/həˈloʊ/",
            definition: "Used as a greeting or to begin a phone conversation",
            example: "Hello, how are you today?",
            difficulty: .beginner,
            category: .daily
        ))
        .padding()
    }
}
